import React, { Component } from 'react';
import { Radio } from 'antd';

import './list.scss'
class Tolist extends Component {
    state = {
        date: '',
        title: '',
        priority: '1',
        list: [
            {
                title: '标题',
                date: '日期',
                priority: '优先级',
            }
        ]
    }
    updateDate = (e) => {
        // console.log(e);
        this.setState({
            date: e.target.value
        })
    }
    updateTitle = (e) => {
        this.setState({
            title: e.target.value
        })
    }
    // 
    handRadio = (e) => {
        console.log(e)
        this.setState({
            priority:e.target.value
        })
    }
    save = () => {
        // console.log(this.state)
        const { date, title, priority } = this.state
        let newArr = this.state.list.concat([{ title, date, priority }])
        this.setState({
            list: newArr
        })
        console.log(this.state.list)
    }
    render() {
        return (<>
            <h2>list</h2>
            <div className='listbox' >
                日期：<input type="text" value={this.state.date} onChange={this.updateDate} re/><br />
                标题：<input type="text" value={this.state.title} onChange={this.updateTitle} /><br />
                优先级：<Radio.Group name="radiogroup" defaultValue={1} onChange={this.handRadio}>
                    <Radio value='1' checked={this.state.priority === '1'}>A</Radio>
                    <Radio value='2' checked={this.state.priority === '2'}>B</Radio>
                    <Radio value='3' checked={this.state.priority === '3'}>C</Radio>
                    <Radio value='4' checked={this.state.priority === '4'}>D</Radio>
                </Radio.Group>
                <button onClick={this.save}>添加</button>
                <div className="list">
                    <ul >
                        {
                            this.state.list.map((item, index) => <li key={index}>
                                <span>{item.title}</span>
                                <span>{item.date}</span>
                                {/* <span>{item.priority === '1' ? '' : '优先级'}</span> */}
                                <span
                                    className={[item.priority === '1' ? 'classA' : '' || item.priority === '2' ? 'classB' : '' ||
                                        item.priority === '3' ? 'classC' : '' || item.priority === '4' ? 'classD' : '']}
                                >
                                    {item.priority}
                                </span>
                            </li>)
                        }
                    </ul>

                </div>
            </div>
        </>);
    }
}

export default Tolist;